<template>
  <div class="page-container page-container-detail-page" :style="{height:HEIGHT+'px'}">
    <!--面包屑-->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>会员中心</el-breadcrumb-item>
        <el-breadcrumb-item>会员管理</el-breadcrumb-item>
        <el-breadcrumb-item>会员列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--工具栏-->
    <div class="toolbar page-container-detail">
      <el-form ref="rulePowerForm page-container-detail"  :model="rulePowerForm">
        <el-row class="mb30">
          <el-form-item label="标签名称：" class="labelAlignment"><span class="font18">{{rulePowerForm.levelName}}</span></el-form-item>
        </el-row>
        <el-row class="mb30">
          <el-form-item label="标记次数：" class="labelAlignment"><span class="font18">{{rulePowerForm.levelName}}</span></el-form-item>
        </el-row>
        <el-row class="mb60">
          <el-form-item label="已选标签："  label-width="90px" class="labelAlignment w1027">
            <template>
              <el-transfer
                ref="myTransfer"
                v-model="rulePowerForm.ruleIds"
                :data="data"
                :titles="['已选标签']"
              >
              </el-transfer>
            </template>
          </el-form-item>
        </el-row >
        <el-form-item class="btnAlignment">
          <el-button :size="size" @click="back" type="primary" plain>{{ $t("action.cancel") }}</el-button>
          <el-button :size="size" type="primary" @click="saveRule()">保存</el-button>
        </el-form-item>
      </el-form>
    </div>


  </div>
</template>

<script>
  import CyTable from "@/views/Core/JicTable";
  import KtButton from "@/views/Core/KtButton";
  import {format} from "@/utils/datetime";
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
  import {validatePhone,validateContacts,isEmail,isNumber} from '@/utils/validate'
  import XLSX from "xlsx";
  export default {
    components: {
      CyTable,
      KtButton,
      TableColumnFilterDialog,
    },
    data() {
      return {
        HEIGHT: window.innerHeight,
        startTime:null,
        endTime:null,
        data:[],
        id:this.$route.query.id,
        businessId:"",
        deptMsg:localStorage.getItem('user'),//当前登录组织信息
        userId:localStorage.getItem("userId"),//当前登录用户id
        deptType:localStorage.getItem("deptType"),//当前登录用户所属组织类型
        deptName:null,
        deptOption:[],
        content: null,
        size: "small",
        rulePowerForm: {
          id:'',
          deptId:'',
          deptName:"",
          levelName:'',
          ruleIds:[]
        },
        pageResult: {},
        value:0,
        printPage:false,
        editLoading: false,
        reviewFormRules: {

        },
        checked: [],
        statusList: []
      };
    },
    methods: {
      queryData(){
        let this_=this;
        let query={};
        query.start=1
        query.limit=10;
        query.id=this.id
        query.deleteFlag=0;
        this_.utils.request.queryMegradeRuleList(query,function(res){
          if(res.code == '0000'){
            this_.rulePowerForm.levelName=res.data.rows[0].levelName;
            this_.rulePowerForm.deptName=res.data.rows[0].deptName;
            this_.rulePowerForm.deptId=res.data.rows[0].deptId;
            this_.rulePowerForm.id=res.data.rows[0].id;
            this_.queryMemberRuleByDeptid(res.data.rows[0].deptId);
            this_.query(res.data.rows[0].deptId,res.data.rows[0].id);
          }
        })
      },
      query(deptId,id){
        let this_=this;
        let query={};
        query.deptId=deptId
        query.gradeId=id
        query.deleteFlag=0;
        this_.utils.request.queryMegradeRule(query,function(res){
          if (res.code == "0000") {
            res.data.forEach(items=>{
              this_.rulePowerForm.ruleIds.push(items.legalRuleId);
            })
          }
        })
      },
      //获取当前平台下的所有权益
      queryMemberRuleByDeptid(deptId){
        let this_=this
        let query={};
        this_.data=[];
        query.deptId=deptId;
        query.deleteFlag=0;
        query.legalRuleType=7;
        this_.utils.request.queryMemberRuleByDeptid(query,function(res){
          if(res.code == '0000'){
            res.data.forEach(items=>{
              this_.data.push({
                key:items.id,
                label:items.legalRuleName,
              })
            })
          }
        })
      },
      back(){
        this.$router.go(-1);//返回上一层
      },
      //保存方法
      saveRule(){
        let this_=this
        // let params={};
        var params = Object.assign({}, this.rulePowerForm);
        if(params.ruleIds.length==0){
          this_.$message({ message: "保存时至少选择一条权限", type: "error" });return;
        }
        this_.$confirm("确认提交吗？", "提示", {}).then(() => {
          this_.utils.request.saveGradeRule(params,function(res){
            if (res.code == "0000") {
              this_.$message({ message: "操作成功", type: "success" });
            } else {
              this_.$message({ message: "操作失败, " + data.msg, type: "error" });
            }
            this_.queryData();
          })
        })
      },
      //获取子平台列表
      queryDeptOption(){
        let query={}
        let this_=this
        this_.utils.request.queryChildList(query,function(res){
          if(res.code == '0000'){
            this_.deptOption=res.data.rows[0]
          }
        })
      },
    },
    mounted() {
      this.queryData()
    }
  };
</script>

<style lang="scss" scoped>
  .w1027{
    /deep/ .el-form-item__content{
      width: 1030px;
      overflow: hidden;
    }
  }
  /deep/ .el-transfer-panel{
    width: 250px !important;
  }
  .page-container-detail {
    padding: 40px 40px 60px;
  }
  /deep/ .el-transfer-panel {
    width: 460px !important;
    height: 318px !important;
  }
  .mb60 {
    margin-bottom: 60px;
  }
  .btnAlignment {
    text-align: center;
    /deep/ .el-button {
      width: 102px;
      height: 32px;
      margin-right: 60px;
    }
  }
  /deep/ .el-form-item__label {
    // margin-right: 20px;
    font-size: 18px;
  }
  /deep/ .el-transfer__buttons {
    button {
      display: block;
      margin-right: 0;
      margin-left: 0;
    }
    button:nth-child(1) {
      margin-bottom: 80px;
    }
  }
</style>
